<script setup lang="ts" name="CCChild1Page_Mitt">
import { onUnmounted, ref } from "vue";
import emitter from "../../../utils/emitter";

const toy = ref("凹凸慢");
const car = ref<string>();
const book = ref<string>();

emitter.on("send-car", (v: string) => {
  car.value = v;
});
emitter.on("send-book", (v: string) => {
  book.value = v;
});

onUnmounted(() => {
  emitter.all.clear();
});
</script>

<template>
  <div class="bg-orange-100 p-6 my-6">
    <h2 class="text-xl">子组件1</h2>
    <div>玩具：{{ toy }}</div>
    <div v-show="car">车：{{ car }}</div>
    <div v-show="book">书：{{ book }}</div>
    <div>
      <button @click="emitter.emit('send-toy', toy)" class="px-1 py-0.5 bg-gray-50 border">
        共享玩具
      </button>
    </div>
  </div>
</template>
